import { Applet } from "@/api/interface/iot";
import { useApplet } from "@/hooks/useApplet";
import { dayjs } from "element-plus";
import { PropType } from "vue";
import AppletLogo from "@public/images/applet/applet.png";
import { ElTooltip } from "element-plus";
import { useRoute } from "vue-router";
import { matchIp } from "@/utils/str";

export default defineComponent({
	props: {
		// serverDetail: {
		// 	type: Object as PropType<System.ResServer>,
		// 	default: () => {}
		// },

		basicDetail: {
			type: Object as PropType<Applet.ResUserApplet>,
			default: () => {}
		}
	},
	emits: ["clickDetailMod"],
	setup(props, { emit }) {
		const route = useRoute();
		const { gotoAppletPage, gotoAccess } = useApplet();
		return () => {
			return (
				<div class="p-6">
					<div class="p-6 shadow" style="border: 1px solid #eee;">
						<div style="line-height:24px">
							<div class="title-left-line"></div>
							<span>基础信息</span>
						</div>
						<div class="flex content-center">
							<div class="p-4 grid grid-cols-2 space-y-2 flex-1">
								<div class="flex  mt-2">
									<div class="w-32">应用名称</div>
									<div class="flex-1">
										<el-link
											type="primary"
											underline={false}
											onClick={() => {
												emit("clickDetailMod");
											}}
										>
											{props.basicDetail.name || "--"}
										</el-link>
									</div>
								</div>
								<div class="flex ">
									<div class="w-32">应用标识</div>
									<div class="flex-1">{props.basicDetail.key}</div>
								</div>
								<div class="flex">
									<div class="w-32">
										访问地址
										<ElTooltip
											raw-content
											v-slots={{
												content: () => {
													return <div class="title">添加并启动了“安装方式”为“资源文件”的服务，即可通过“访问地址”访问</div>;
												}
											}}
										>
											<i class="iconfont iconhelp-circle pl-2 "></i>
										</ElTooltip>
									</div>
									<div class="flex-1">
										{!matchIp(window.location.host) ? (
											<el-link type="primary" underline={false} onClick={() => gotoAccess(props.basicDetail)}>
												{`http://${route.query.key}.${window.location.host}`}
											</el-link>
										) : (
											<span class="text-gray-400">使用域名访问平台时生成</span>
										)}
									</div>
								</div>
								<div class="flex">
									<div class="w-32">
										实际地址
										<ElTooltip
											raw-content
											v-slots={{
												content: () => {
													return (
														<div class="title">
															系统将通过“访问地址”代理到“实际地址”，但如果设置了“资源文件”服务，系统优先访问“资源文件”。
														</div>
													);
												}
											}}
										>
											<i class="iconfont iconhelp-circle pl-2 "></i>
										</ElTooltip>
									</div>
									<div class="flex-1">
										<el-link type="primary" underline={false} onClick={() => gotoAppletPage(props.basicDetail)}>
											{props.basicDetail.home || "--"}
										</el-link>
									</div>
								</div>
								<div class="flex ">
									<div class="w-32">创建时间</div>
									<div class="flex-1">
										{(props.basicDetail.createTime && dayjs(props.basicDetail.createTime).format("YYYY-MM-DD hh:mm:ss")) || "--"}
									</div>
								</div>
								<div class="flex ">
									<div class="w-32">修改时间</div>
									<div class="flex-1">
										{(props.basicDetail.updateTime && dayjs(props.basicDetail.updateTime).format("YYYY-MM-DD hh:mm:ss")) || "--"}
									</div>
								</div>
								<div class="flex ">
									<div class="w-32">应用更新时间</div>
									<div class="flex-1">
										{(props.basicDetail.svcUpdateTime && dayjs(props.basicDetail.svcUpdateTime).format("YYYY-MM-DD hh:mm:ss")) ||
											"--"}
									</div>
								</div>
								<div class="flex ">
									<div class="w-32">创建人</div>
									<div class="flex-1">{props.basicDetail.creator || "--"}</div>
								</div>
								<div class="flex col-span-2">
									<div class="w-32">描述</div>
									<div class="flex-1">{props.basicDetail.desc || "--"}</div>
								</div>
							</div>
							<el-image style="width:200px;" src={props.basicDetail.logo || AppletLogo} fit="contain"></el-image>
						</div>
					</div>
					<div class="p-6 shadow mt-6" style="border: 1px solid #eee;">
						<div style="line-height:24px">
							<div class="title-left-line"></div>
							<span>文档信息</span>
						</div>
						<div class="p-4 grid grid-cols-1">
							<div class="flex ">
								<div class="w-32">应用文档</div>
								<div class="flex-1">
									<el-link href={props.basicDetail.doc} type="primary" underline={false} target="_blank">
										{props.basicDetail.doc || "--"}
									</el-link>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
